<template>
  <div class="detail-container">
    <el-row>
      <p class="iconColor header" style="margin-bottom: 0.521vw">
        <i class="el-icon-s-promotion iconColor"></i>
        <span style="color: #e9a539">房产详情</span>
      </p>
      <h3 class="title">东裕商务大夏</h3>
      <el-row type="flex" class="main" justify="space-between">
        <el-col :span="15" class="main-div" v-if="detailInfo.photos">
          <img class="main-img" :src="detailImg" alt="" />
        </el-col>
        <el-col :span="8">
          <div class="right-aside">
            <div class="top-img">
              <img
                @click="changeDetailImg(item)"
                v-for="item in detailInfo.photos"
                :key="item"
                :src="item"
                alt=""
              />
            </div>
            <div class="map-container">
              <div class="price">{{ detailInfo.price }}元</div>
              <div class="map-wrap"><Map /></div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="content" v-html="detailInfo.content"></div>
    </el-row>
  </div>
</template>

<script>
import { getPropertiesByIdApi } from "@/api/properties.js";
import Map from "../../components/Map.vue";
export default {
  components: { Map },
  data() {
    return {
      detailInfo: {},
      detailImg: "",
      id: "",
    };
  },
  methods: {
    async getPropertiesById() {
      const { data } = await getPropertiesByIdApi(this.id);
      this.detailInfo = data;
      this.detailImg = data.photos[0];
      console.log(data);
    },
    changeDetailImg(url) {
      this.detailImg = url;
    },
  },
  created() {
    // console.log(this.$route.params);
    this.id = this.$route.params.id;
    this.getPropertiesById();
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.detail-container {
  min-height: calc(100vh - 13.594vw);
  width: 50vw;
  margin: auto;
  p {
    border-bottom: 0.052vw solid rgba(240, 240, 240, 0.5);
    padding-bottom: 0.521vw;
  }
  .iconColor {
    color: #f2b86d;
  }
  .header {
    margin: 1vw 0;
    span {
      // font-weight: bold;
      font-size: 1.5vw;
    }
  }
  .el-icon-s-promotion {
    color: #e9a539;
    font-size: 1.5vw;
    margin-right: 0.26vw;
  }
  .title {
    padding: 0.26vw 0;
    color: #000;
    font-weight: 700;
  }
  .main{
	margin-bottom: 1.042vw;
  height: 31.556vw;
  }
  .main-div{
	height: 100%;
  }
  .main-img {
    width: 100%;
    height: 100%;
    // object-fit: cover;
    // object-fit: contain;
    // padding: 0.26vw 0.521vw;
    border-radius: 0.26vw;
  }
  .right-aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top-img {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
	align-items: center;
		min-height: 11.979vw;
      padding: 0 2.604vw;
      img {
        width: 4.167vw;
        height: 4.167vw;
        margin-left: 0.521vw;
        margin-bottom: 0.521vw;
        border-radius: 0.26vw;
      }
    }
    .price {
      text-align: center;
      color: #f2b86d;
      font-weight: 700;
    }
    .map-container{
      margin-top: 2.963vw;
      .map-wrap {
      box-sizing: border-box;
      margin-top: 1.302vw;
      padding: 0.052vw;
      border: 0.052vw solid #eee;
    }
    }
    
  }

  .content {
    min-height: 6.771vw;
    text-indent: 1.042vw;
    line-height: 1.302vw;
    color: #fff;
    border: 0.052vw solid rgba(240, 240, 240, 0.2);
	margin-bottom: 1.042vw;
  }
}
</style>